<template>
  <div class="divWarehouse">
    <div class="divHead">
      <el-row :gutter="30">
        <el-col :span="6">
          <div class="divLable">
            仓库编号</div>
            <el-input v-model="searchParams.like_code" placeholder="请输入" maxlength="10"/>
        </el-col>
        <el-col :span="6">
          <div class="divLable">仓库名称</div>
            <el-input v-model="searchParams.like_name" placeholder="请输入"  maxlength="10"/>
        </el-col>
        <el-col :span="6">
           <div class="divLable">仓库状态</div>
              <el-select v-model="searchParams.status" clearable  placeholder="请选择">
                <el-option
                  v-for="item in statusSelectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
        </el-col>
        <el-col :span="6">
            <div class="divLable"></div>
            <div class="divButton">
              <base-button class="minorImportantButton btnSearch" @click="getList">搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
        </el-col>
      </el-row>
    </div>
    <div class="divContent">
      <base-button class="importantButton btnAdd" @click="btnAdd">新增仓库</base-button>
      <div v-if="tableData.length>0">
      <el-table :data="tableData" stripe border style="width: 100%" v-loading="loading" :header-cell-style="{background: '#f9f6ee'}">
        <el-table-column type="index" align="center" width="68"  label="序号"/>
        <el-table-column prop="code" align="center" label="仓库编码" width="150" />
        <el-table-column prop="name" align="center" label="仓库名称" width="150" />
        <el-table-column prop="type" align="center" label="仓库类型" width="150" >
          <template slot-scope="{row}">
            <span v-if="row.type === 'ZZ'">中转仓</span>
            <span v-if="row.type === 'JG'">加工仓</span>
            <span v-if="row.type === 'CB'">储备仓</span>
            <span v-if="row.type === 'LC'">冷藏仓</span>
          </template>
        </el-table-column>
        <el-table-column prop="location" align="center" label="省/市/区"  width="200"/>
        <el-table-column prop="address" align="center" label="详细地址" width="150" />
        <el-table-column prop="status" align="center" label="仓库状态" width="150" >
          <template slot-scope="{row}">
            <span v-if="row.status === 0">停用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="surface" align="center" label="仓库面积m²" width="150" />
        <el-table-column prop="includedNum" align="center" label="库区数量" width="150" />
        <el-table-column prop="personName" align="center" label="负责人" width="150" />
        <el-table-column prop="phone" align="center" label="联系电话" width="150" />
        <el-table-column prop="updateTime" align="center" label="更新时间" width="200" />
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template slot-scope="{row}">
            <base-button class="fontOperateButton" @click="editClick(row.id)">编辑</base-button>
            <base-button class="fontOperateButton" v-if="row.status ===1" @click="statusChangeClick(row.status,row.id,row.name)">停用</base-button>
            <base-button class="fontOperateButton" v-else @click="statusChangeClick(row.status,row.id,row.name)">启用</base-button>
            <base-button class="fontOperateButton" @click="deleteClick(row.id,row.name)">删除</base-button>
          </template>
        </el-table-column>
      </el-table>
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>

      </div>
         <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无仓库</p>
      </div>
    </div>
    <el-dialog
      :title="dialogData.dialogTitle"
      :visible.sync="dialogData.visible"
      width="30%">
      <span>{{dialogData.msg}}</span>
      <span slot="footer" class="dialog-footer">
        <base-button class="unimportanceButton btnCancle" @click="dialogData.visible = false">取 消</base-button>
        <base-button :class="dialogData.dialogTitle.indexOf('删除') > -1 ? 'errorButton' : 'minorImportantButton' " type="primary" @click="dialogSure">确 定</base-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import { IWarehouseTableData } from '@/module-base/interface/warehouse'
import BasePagination from '@/components/base-pagination/index.vue'
import {
  getWarehousePaging,
  changeWarehouseStatus,
  deleteWarehouse
} from '@/module-base/api/warehouse'
import { warehouseStatusSelectOptions } from '@/utils/common-select-data'
import { ICommonReturn, ICommonSelectOptions } from '@/utils/common-interface'
import { mixins } from 'vue-class-component'
import SinglePage from '@/mixin/single-page'

@Component({
  name: 'Warehouse',
  components: {
    BaseButton,
    BasePagination
  }
})

export default class extends mixins(SinglePage) {
  private tableData: IWarehouseTableData[] = []
  private statusSelectOptions:ICommonSelectOptions[] = []
  private loading = false
  private searchParams={
    like_code: '',
    like_name: '',
    status: undefined
  }

  private dialogData ={
    id: '',
    msg: '',
    status: -1,
    dialogTitle: '',
    visible: false
  }

  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  @Watch('$route', { immediate: true })
  private onRouteChange() {
    this.getList()
  }

  mounted() {
    this.statusSelectOptions = warehouseStatusSelectOptions
  }

  private btnResetClick() {
    this.searchParams = {
      like_code: '',
      like_name: '',
      status: undefined
    }
    this.getList()
  }

  private btnAdd() {
    if (this.confirmMsg()) {
      return
    }
    this.$router.push({ path: 'warehouse/details/null' })
  }

  private getParams() {
    const current = this.paging.current
    const size = this.paging.size
    const params = {
      ...this.searchParams,
      current,
      size,
      descs: 'createTime'
    }
    if (params.status === -1) {
      delete params.status
    }
    return params
  }

  private async getList() {
    this.loading = true
    const params = this.getParams()
    const { data } = await getWarehousePaging(params)
    this.loading = false
    this.tableData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private editClick(id:string) {
    if (this.confirmMsg()) {
      return
    }
    this.$router.push({ path: `warehouse/details/${id}` })
  }

  private deleteClick(id:string, name:string) {
    if (this.confirmMsg()) {
      return
    }
    this.dialogData.msg = `确定要删除仓库名为：${name} 的仓库吗？`
    this.dialogData.id = id
    this.dialogData.visible = true
    this.dialogData.dialogTitle = '确认删除'
  }

  private async deleteSure() {
    const params = {
      ids: [this.dialogData.id]
    }
    const data = await deleteWarehouse(params) as unknown as ICommonReturn
    if (data.code === 0) {
      this.$message({
        showClose: true,
        message: '数据删除成功',
        type: 'success'
      })
      this.dialogData.visible = false
      this.getList()
    } else {
      this.$message({
        showClose: true,
        message: data.msg,
        type: 'error'
      })
    }
  }

  private dialogSure() {
    if (this.dialogData.msg.indexOf('删除') > 0) {
      this.deleteSure()
    } else {
      this.statusChangeSure()
    }
  }

  private statusChangeClick(status:number, id:string, name:string) {
    const type = status === 0 ? '启用' : '停用'
    this.dialogData = {
      msg: `确定要${type}：${name} 吗？`,
      id: id,
      status: status === 0 ? 1 : 0,
      visible: true,
      dialogTitle: `确认${type}`
    }
  }

  private async statusChangeSure() {
    const params = {
      id: this.dialogData.id,
      status: this.dialogData.status
    }
    const data = await changeWarehouseStatus(params) as unknown as ICommonReturn
    if (data.code === 0) {
      this.$message({
        showClose: true,
        message: '状态改变成功',
        type: 'success'
      })
      this.dialogData.visible = false
      this.getList()
    } else {
      this.$message({
        showClose: true,
        message: data.msg,
        type: 'error'
      })
    }
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
